<template>
  <template v-if="isRoot === true">
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
    >
      <MenuItem :data-list="dataList"/>
    </el-menu>
  </template>
  <template v-else>
    <MenuItem :data-list="dataList"/>
  </template>

</template>

<script lang="ts" setup>

import MenuItem from "@/components/MenuItem.vue";

/**
 * dataList需要满足以下数据结构
 * const menuClass = {
 *   title: {type: String, required: true,},
 *   path: {type: String, required: true,},
 *   children: {type: Array<menuClass>, required: false},
 * };
 */
defineProps({
  isCollapse: {type: Boolean, default: false},
  isRoot: {type: Boolean, default: false},
  dataList: {type: Array}
});
const handleOpen = (key: string, keyPath: string[]) => {
}
const handleClose = (key: string, keyPath: string[]) => {
}

</script>